<template>
    <div class="page-box">
        <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
        <div class="empty-box">
          <img src="../../assets/img/empty.png" width="180" />
          <div>建设中…</div>
        </div>
        <!-- <div class="app-container">
            <div class="filter-container">
                <el-form :inline="true" class="demo-form-inline" label-position="left">
                    <el-form-item label="客户名称" label-width="90px">
                        <el-input v-model="search.customerName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button @click="reset">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit style="width: 100%;"
                :height="height + 'px'">
                <el-table-column label="客户归属" align="center" v-element-table-tooltip width="100">
                    <template slot-scope="{row}">
                        <span>{{ row.customerBelonging }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="客户名称" align="center" v-element-table-tooltip width="300">
                    <template slot-scope="{row}">
                        <span>{{ row.customerName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="信息化负责部门" align="center" v-element-table-tooltip width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.chargeDept }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="负责人" align="center" v-element-table-tooltip width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.chargePerson }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否有历史合作" align="center" v-element-table-tooltip width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.cooperateFlag }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="解决方案经理" align="center" v-element-table-tooltip width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.solutionMgrName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="客户经理" align="center" v-element-table-tooltip width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.customerMgrName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="负责人" align="center" v-element-table-tooltip width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.customerChargePerson }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="存量项目" align="center" v-element-table-tooltip width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.stockProject }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="数量" align="center" v-element-table-tooltip width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.projectCount }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="项目所属运营商/厂家" align="center" v-element-table-tooltip width="160">
                    <template slot-scope="{row}">
                        <span>{{ row.projectProvider }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="项目金额（预计）" align="center" v-element-table-tooltip width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.projectAmount }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="项目内容" align="center" v-element-table-tooltip width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.projectDescription }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="合同起始时间" align="center" v-element-table-tooltip width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.contractBeginTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="合同时长（月）" align="center" v-element-table-tooltip width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.contractMonth }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="合同结束时间" align="center" v-element-table-tooltip width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.contractEndTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否有新商机" align="center" v-element-table-tooltip width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.businessOppFlag }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商机获取时间" align="center" v-element-table-tooltip width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.businessOppTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商机名称" align="center" v-element-table-tooltip width="250">
                    <template slot-scope="{row}">
                        <span>{{ row.businessOppName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商机内容" align="center" v-element-table-tooltip width="250">
                    <template slot-scope="{row}">
                        <span>{{ row.businessOppDescription }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商机预算（万元）" align="center" v-element-table-tooltip width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.businessOppAmount }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="供给方案" align="center" v-element-table-tooltip width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.supplyPlan }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="合作伙伴" align="center" v-element-table-tooltip width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.partnerName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="方案负责人" align="center" v-element-table-tooltip width="100">
                    <template slot-scope="{row}">
                        <span>{{ row.solutionChargePerson }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否中标" align="center" v-element-table-tooltip width="100">
                    <template slot-scope="{row}">
                        <span>{{ row.zbFlag }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="中标金额（万元）" align="center" v-element-table-tooltip width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.zbAmount }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="100px" fixed="right">
                    <template slot-scope="{row}">
                        <el-button @click="goOkr(row)" type="text">调度</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="pagination.pageNum"
                :limit.sync="pagination.pageSize" @pagination="getPagination" />
        </div> -->
    </div>
</template>

<script>
import { selectByCustomerName } from '@/api/api'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import Breadcrumb from '@/components/Breadcrumb'
import moment from 'moment'
import store from '@/store'
let query;
export default {
    name: 'warnTable',
    components: { Breadcrumb, Pagination },
    data() {
        return {
            disabled: sessionStorage.getItem('orgCode') !== '10008',
            height: 600,
            tableKey: 0,
            list: null,
            total: 0,
            listLoading: true,
            search: {},
            options: [{
                value: '0',
                label: '省本级'
            }, {
                value: '30182',
                label: '哈尔滨'
            }, {
                value: '30183',
                label: '齐齐哈尔'
            }, {
                value: '30184',
                label: '牡丹江'
            }, {
                value: '30185',
                label: '佳木斯'
            }, {
                value: '30186',
                label: '大庆'
            }, {
                value: '30187',
                label: '伊春'
            }, {
                value: '30188',
                label: '鸡西'
            }, {
                value: '30189',
                label: '鹤岗'
            }, {
                value: '30190',
                label: '双鸭山'
            }, {
                value: '30191',
                label: '‌七台河'
            }, {
                value: '30192',
                label: '绥化'
            }, {
                value: '30193',
                label: '黑河'
            }, {
                value: '30194',
                label: '大兴安岭'
            }],
            pagination: {
                "pageNum": 1,
                "pageSize": 20
            },
        }
    },
    created() {
        query = this.$route.query;
        if (query.yearFilter && query.yearFilter != 'all') {
            if (query.yearFilter === String(new Date().getFullYear())) {
                this.search = { ...query, zbTime: [query.yearFilter + '-01-01', moment().format('YYYY-MM-DD')] };
            } else {
                this.search = { ...query, zbTime: [query.yearFilter + '-01-01', query.yearFilter + '-12-31'] };
            }
        } else {
            this.search = { ...query };
        }
        this.getList();
        this.height = this.getHeight();
        let that = this;
        window.onresize = function (event) {
            that.height = that.getHeight();
        };
    },
    methods: {
        goOkr(item, content) {
            let loginCode = store.getters.loginCode
            window.open(`/#/tokenLogin?loginCode=${loginCode}&type=40&content=${item.customerBelonging + item.customerName + item.projectDescription}`)
        },
        getHeight() {
            let winHieght = window.innerHeight;
            return winHieght - 200;
        },
        getPagination(pagination) {
            this.pagination = pagination;
            this.getList();
        },
        goDetail(row) {
            window.top.postMessage(
                JSON.stringify({
                    to: 'portal',
                    action: 'open',
                    pathname: `/iframe/PROJECT_MENU_MY_PROJECT_PROJECTFULLVIEW?uniqueProjectInstId=${row.UniqueProjectInstId}&bupMenuNo=${row.bupMenuNo}&tableRecord=${row.tableRecord}`,
                }),
                '*'
            )
        },
        onSubmit() {
            this.pagination = {
                "pageNum": 1,
                "pageSize": 20
            }
            this.getList();
        },
        reset() {
            this.pagination = {
                "pageNum": 1,
                "pageSize": 20
            }
            this.search = { ...query };
            this.getList();
        },
        getNumW(num) {
            return this.truncateToFixed(num / 10000, 2)
        },
        truncateToFixed(value, decimals) {
            const integerPart = Math.trunc(value); // 获取整数部分
            const decimalPart = value - integerPart; // 获取小数部分
            const factor = Math.pow(10, decimals);
            const truncatedDecimalPart = decimalPart < 0 ? Math.ceil(decimalPart * factor) / factor : Math.floor(decimalPart * factor) / factor; // 根据正负选择向上或向下截断
            return integerPart + truncatedDecimalPart; // 组合整数部分和小数部分
        },
        getList() {
            this.listLoading = true;
            try {
                let param = {
                    ...this.search,
                    page: this.pagination.pageNum,
                    size: this.pagination.pageSize,
                }
                selectByCustomerName(param).then(response => {
                    this.list = response.list || []
                    this.total = response.total || 0
                    this.listLoading = false
                })
            } catch (error) {
                console.log('error', error)
                this.listLoading = false
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.page-box {
    background: #fff;
    height: 100%;
}

::v-deep .el-form-item {
    margin-bottom: 10px;
    margin-right: 20px;
}

::v-deep .el-table th {
    color: #000;
}

::v-deep .el-select--medium {
    min-width: 240px;
}

::v-deep .el-form-item--medium .el-form-item__content {
    min-width: 313px;
}

::v-deep .el-date-editor--daterange.el-input__inner {
    width: 240px;
}

::v-deep .el-select {
    width: 100%;
}
.empty-box {
  text-align: center;
  color: #999;
  line-height: 40px;
  margin-top: 100px;
  width: 100%;
}
</style>